<template>
  <div class="rights-container">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <bread :second="'权限管理'"  :third="'权限列表'"></bread>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <!-- 表格 -->
            <el-table :data="tableData" border="" style="width: 100%;margin:20px 0">
                <el-table-column type="index" width="50" label="#"></el-table-column>
                <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
                <el-table-column prop="path" label="路径" width="180"></el-table-column>

                <el-table-column  label="权限等级">
                  <template slot-scope="scoped">
                    <el-tag v-if="scoped.row.level==0" >一级</el-tag>
                    <el-tag v-else-if="scoped.row.level==1" type="success">二级</el-tag>
                    <el-tag v-else type="warning">三级</el-tag>
                  </template>
                </el-table-column>
            </el-table>
      </div>
    </el-card>
  </div>
</template>
           
<script>
import  {rightsAll_api} from "@/api"
export default {
  data(){
    return {
      tableData:[]
    }
  },
  created(){
    this.getRights()
  },
  methods:{
    async getRights(){
      const  {data:res}=await rightsAll_api('list')
      console.log(res,4444);
      this.tableData=res.data
    }
  },
}
</script>
<style scoped lang='less'>
.rights-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }

  .box-card {
    .iptBox {
    }
  }
}
</style>